import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import style from './style.less';

const PicCard = (props: {
  picSrc: string;
  value: number | string;
  title: string;
  unit: string;
  updateTime: string;
  hide?: boolean;
  tooltip?: string;
}) => {
  const { picSrc, value, title, unit, updateTime, hide = false, tooltip } = props;
  // TODO: 传入 #564ef9 #008BFA  #0069F9
  return (
    <div className={style.picCard} style={{ visibility: hide ? 'hidden' : 'visible' }}>
      <div className={style.logo}>
        <img src={picSrc} alt="" />
      </div>
      <div className={style.content}>
        <div className={style.titleInfo}>
          <p className={style.title}>
            {title}
            {tooltip && (
              <Tooltip title={tooltip}>
                <QuestionCircleOutlined
                  style={{ marginLeft: '3px', fontSize: '90%', color: '#999', cursor: 'help' }}
                />
              </Tooltip>
            )}
          </p>

          <p className={style.time}>数据时间 {updateTime}</p>
        </div>
        <div className={style.valueInfo}>
          <span className={style.amount}>{value}</span>
          <i className={style.unit}>{unit}</i>
        </div>
      </div>
    </div>
  );
};

export default PicCard;
